<template>
  <!-- inbound查询页面 -->
  <section class="page inbound-query">
    <data-form :model="model" :page="pageService" @handleResetForm="handleResetForm" @onSearch="refreshData">
      <template slot="inputs">
        <el-form-item label="订单编号" prop="caseNumber">
          <el-input v-model="model.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="personalName">
          <el-input v-model="model.personalName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobileNo">
          <el-input v-model="model.mobileNo"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="model.idCard"></el-input>
        </el-form-item>
        <el-form-item label="案件状态" prop="collectionStatus">
          <el-select clearable placeholder="请选择" v-model="model.collectionStatus">
            <el-option :key="index" :label="name" :value="code" v-for="{index,name,code} in collectionStatus"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="案件金额" prop="caseMoney">
          <number-range :isInteger="true" v-model="model.caseMoney"></number-range>
        </el-form-item>
        <el-form-item label="欠款金额" prop="overdueAmount">
          <number-range :isInteger="true" v-model="model.overdueAmount"></number-range>
        </el-form-item>
        <el-form-item label="逾期阶段" prop="overduePeriod">
          <el-select clearable placeholder="请选择" v-model="model.overduePeriod">
            <el-option :key="index" :label="name" :value="code.replace(/M|\+/, '')" v-for="{index,name,code} in $dict.getDictData('OverduePeriodStatus')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="逾期天数" prop="overdueDays">
          <number-range :isInteger="true" v-model="model.overdueDays"></number-range>
        </el-form-item>
        <el-form-item label="地区" prop="area">
          <el-input v-model="model.area"></el-input>
          <!-- <el-cascader v-model="model.area" :options="$city.getCityData()" change-on-select clearable></el-cascader> -->
        </el-form-item>
        <el-form-item label="催收员" prop="currentCollectorRealName">
          <el-input v-model="model.currentCollectorRealName"></el-input>
        </el-form-item>
        <el-form-item label="案件标签" prop="labelName">
          <get-label-name :formModel="model" v-model="model.labelName"></get-label-name>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="dataSet" :page="pageService" :sort="sortService" @onPageChange="refreshData">
      <template slot="columns">
        <el-table-column :min-width="$helper.getColumnWidth(6)" label="订单编号" prop="caseNumber">
          <template slot-scope="scope">
            <el-button @click="openExecutionPage(scope.row)" type="text">{{scope.row.caseNumber}}</el-button>
          </template>
        </el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(3)" label="客户姓名" prop="personalName"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="手机号" prop="mobileNo"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(6)" label="身份证号" prop="idCard"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="地区" prop="area"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="案件金额(元)" prop="caseMoney"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="欠款金额(元)" prop="overdueAmount"></el-table-column>
        <el-table-column :formatter="row => $common.isNotValue(row.overduePeriod) ? '':`M${row.overduePeriod}`" :min-width="$helper.getColumnWidth(3)" label="逾期期数" prop="overduePeriod"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(3)" label="逾期天数" prop="overdueDays"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="产品类型" prop="productCategory"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="产品名称" prop="productName"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="还款日" prop="perDueDate"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="永久催收员" prop="currentCollectorRealName"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="临时催收员" prop="tempCollectorRealName"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="锁定人员" prop="lockCollectorRealName"></el-table-column>
        <el-table-column :formatter="(row) => $filter.dictConvert(row.leaveCaseFlag,'CommonFlag')" :min-width="$helper.getColumnWidth(4)" label="留案标识" prop="leaveCaseFlag"></el-table-column>
        <el-table-column :formatter="(row) => $filter.dateFormat(row.leaveDueDate)" :min-width="$helper.getColumnWidth(4)" label="留案到期日期" prop="leaveDueDate"></el-table-column>
        <el-table-column :formatter="(row) => $filter.dictConvert(row.collectionStatus,'CollectionStatus')" :min-width="$helper.getColumnWidth(4)" label="案件状态" prop="collectionStatus"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(10)" label="案件标签" prop="labelName"></el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies, Layout } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";

import NumberRange from "~/components/common/number-range.vue";
import { namespace } from "vuex-class";
import { CASE_CHANNEL, MENU_CHANNEL } from "~/config/enum.config";
import { SynthesizeQueryService } from "~/services/domain-service/synthesize-query.service";
import GetLabelName from "~/components/labeling-strategy/get-label-name.vue";

const CollectionExecutionModule = namespace("collection-execution");

@Layout("workspace")
@Component({
  components: {
    GetLabelName,
    NumberRange
  }
})
export default class InBoundQuery extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(SynthesizeQueryService)
  private synthesizeQuerService: SynthesizeQueryService;

  private callDepartmentData;

  @CollectionExecutionModule.Action private openCollectionExecution;
  @CollectionExecutionModule.Mutation private updateCollectionSign;
  private caseType = CASE_CHANNEL.tel;
  private booleanValue = false;
  private caseId: any;
  private model: any = {
    caseNumber: "",
    personalName: "",
    mobileNo: "",
    idCard: "",
    currentCollectorRealName: "",
    collectionStatus: "",
    overdueAmount: {
      max: "",
      min: ""
    },
    caseMoney: { min: "", max: "" },
    overduePeriod: "",
    overdueDays: {
      max: "",
      min: ""
    },
    area: "",
    labelName: []
  };
  private dataSet: any[] = [];

  private mounted() {
    // this.refreshData()
  }

  private activated() {
    if (this.caseId) {
      this.synthesizeQuerService
        .bindLockingCollector(this.caseId)
        .subscribe(data => {
          setTimeout(() => {
            this.refreshData();
          }, 100);
        });
    }
  }

  private inBoundQuery() {
    const exists = Object.values(this.model).filter(x => {
      if (x instanceof Object) {
        return !!Object.values(x).filter(sub => !!sub).length;
      } else if (Array.isArray(x)) {
        return !!(x as any).filter(array => !!array).length;
      } else {
        return !!x;
      }
    });

    if (!exists.length) {
      this.$message.warning("请输入至少一项查询条件");
      return;
    }

    this.synthesizeQuerService
      .inboundQuery(this.model, this.pageService, this.sortService)
      .subscribe(data => (this.dataSet = data));
  }

  private refreshData() {
    this.inBoundQuery();
  }

  /**
   * 表单范围输入框重置
   */
  private handleResetForm() {
    this.model.overdueAmount = { min: "", max: "" };
    this.model.overdueDays = { min: "", max: "" };
    this.model.caseMoney = { min: "", max: "" };
  }

  /**
   * 进入查看执行页
   */
  private openExecutionPage(row) {
    this.caseId = row.id;
    let hiddenAction = false;
    //控制打开催收页类别
    if (
      row.collectionType === "TEL" &&
      (row.collectionStatus === "INNER_COLLECTING" ||
        row.collectionStatus === "INNER_WAIT_DISTRIBUTE")
    ) {
      this.caseType = CASE_CHANNEL.tel;
    } else if (
      row.collectionType === "TEL" &&
      row.collectionStatus !== "INNER_COLLECTING" &&
      row.collectionStatus !== "INNER_WAIT_DISTRIBUTE"
    ) {
      this.caseType = CASE_CHANNEL.tel;
      hiddenAction = true;
    } else if (
      row.collectionType === "VISIT" &&
      (row.collectionStatus === "INNER_COLLECTING" ||
        row.collectionStatus === "INNER_WAIT_DISTRIBUTE")
    ) {
      this.caseType = CASE_CHANNEL.visit;
    } else if (
      row.collectionType === "VISIT" &&
      row.collectionStatus !== "INNER_COLLECTING" &&
      row.collectionStatus !== "INNER_WAIT_DISTRIBUTE"
    ) {
      this.caseType = CASE_CHANNEL.visit;
      hiddenAction = true;
    }

    this.$router.openCaseDetail(row.id, {
      menuChannel: MENU_CHANNEL.NONE,
      hiddenCaseList: true,
      hiddenAction: true
    });
  }

  //过滤案件状态类型
  private get collectionStatus() {
    const enableCollectionStatus: any = [
      "INNER_COLLECTING",
      "INNER_BANKC",
      "INNER_PAYOFF"
    ];
    return this.$dict
      .getDictData("CollectionStatus")
      .filter(v => enableCollectionStatus.includes(v.code));
  }
}
</script>

<style lang="less" scoped>
</style>
